<template>
  <!-- <el-button plain @click="dialogFormVisible = true"> Open a Form nested Dialog </el-button> -->
  <el-dialog v-model="dialogFormVisible" title="编辑工作计划" width="500">
    <el-form :model="todo">
      <el-form-item label="任务编号" :label-width="formLabelWidth">
        <el-input readonly v-model="todo.todoid" autocomplete="off" />
      </el-form-item>
      <el-form-item label="标题" :label-width="formLabelWidth">
        <el-input v-model="todo.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="infoe" :label-width="formLabelWidth">
        <el-input v-model="todo.info" autocomplete="off" />
      </el-form-item>
      <el-form-item label="计划执行时间" :label-width="formLabelWidth">
        <el-input v-model="todo.todotime" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="doConfirm"> Confirm </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import useTodoStore from '@/stores/todo'
import { storeToRefs } from 'pinia'

const todoStore = useTodoStore()

const { dialogFormVisible, todo } = storeToRefs(todoStore)

const formLabelWidth = '140px'

const doConfirm = () => {
  todoStore.doConfirm()
}
</script>
